{% extends "repo/repo.html" %}

{% block subcontainer %}
<div class="collaborator network inner bubble">
  <ul class="breadcrumb">
    <li><a href="/{{user_name}}/{{repo_name}}/settings/"><i>&larr;</i>返回设置</a></li>
  </ul>
  <div class="header">
    <h1 class="heading">仓库成员列表</h1>
    <p class="note">所有成员对仓库有完全的读写权限</p>
    <div class="extra">
      <a href="javascript:;" id="add_member_tip" class="btn btn-mini"><i class="icon-plus-sign"></i>添加新成员</a>
      <span id="alert" class="alert alert-error hide"></span>
      <div id="name_input" class="fiels hide">
        <input id="username_or_email" type="text" name="username_or_email" maxlength="30" placeholder="输入邮箱或者用户名">
        <button id="add_member" type="submit" class="btn btn-success">添加</button>
      </div>
    </div>
  </div>

  <div class="members">
      {%for member_vo in members_vo%}
        <div class="member">
          <figure class="avatar">
            <img src="https://gravatar.com/avatar/{{ member_vo.imgurl }}?s=85" alt="{{ gsuser.username }}">
          </figure>
          <div class="summary">
            <p class="name">
              <a href="/{{member_vo.username}}/">{{member_vo.username}}</a>
              {%if member_vo.nickname%}
                <span>({{member_vo.nickname}})</span>
              {%endif%}
              {%if member_vo.tweet%}
                <span class="tweet">{{member_vo.tweet}}</span>
              {%endif%}
            </p>
            <p class="meta">
              <span><i class="icon-time"></i><span class="unixtime">{{member_vo.date_joined}}</span>加入</span>
              <span class="divider">/</span>
              <span><i class="icon-map-marker"></i><span class="unixtime">{{member_vo.last_login}}</span>登陆过</span>
            </p>
          </div>
          {% if member_vo.username != user_name %}
            <a href="javascript:;" class="remove_member delete-member" value="{{member_vo.username}}"><i class="icon-trash"></i></a>
          {% endif %}
        </div>
      {%endfor%}
  </div>

</div>
{% endblock %}

{% block subjs %}

<script>
  $(function(){
    $('#add_member_tip').click(function(event) {
        $(this).hide();
        $('#name_input').show();
        $('#username_or_email').focus();
    });
    $('#username_or_email').blur(function(event) {setTimeout(function(event) {
        $('#name_input').hide();
        $('#add_member_tip').show();
    }, 300);});
    $('#add_member').click(function(event) {
        var username_or_email = $('#username_or_email').attr('value');
        $.post('/{{user_name}}/{{repo_name}}/settings/member/add/', {csrfmiddlewaretoken: '{{ csrf_token }}', 'username_or_email': username_or_email}, function(json){
            if(json.code == 200) {
                window.location.href = window.location.href;
            } else if(json.code == 301) {
                $('#alert').text(json.message);
                $('#alert').show().delay(3000).fadeOut();
            } else {
                alert(json.message);
            }
        });
    });
    $('.remove_member').click(function(event) {
        var username = $(this).attr('value');
        $.post('/{{user_name}}/{{repo_name}}/settings/member/remove/', {csrfmiddlewaretoken: '{{ csrf_token }}', 'username': username}, function(json){
            window.location.href = window.location.href;
        });
    });
  });
</script>
{% endblock %}
